<template>
	<view class="uni-container">
		<view class="top-note">
			<view class="padding-lr-60 text-center color-555 font-28 font-weight-850 padding-top-20">
				<text>请填写或修改经营信息</text>
			</view>
			<view class="padding-lr-60 text-center color-555 padding-top-10 font-28 ">
				<text>请先输入门牌号码，如果之前有输入数据，系统会调出您的商户信息数据，您可以进行修改。</text>
			</view>
			<view class="padding-lr-60 text-center color-555 padding-top-10 font-28 padding-bottom-40">
				<text>如果之前没有录入数据，您输入的数据将作为全新数据录入。</text>
			</view>
		</view>
		<view class="padding-22">
			<uni-forms ref="form" :value="formData" validate-trigger="bind" label-width="100" label-position="top">

				<uni-forms-item name="ID" label="商户统一编号" required>
					<view class="shop-id-box">
						<text>{{formData.ID?formData.ID:'唯一编号,输入门牌号后系统自动识别生成'}}</text>
					</view>
				</uni-forms-item>

				<uni-forms-item label="商户门牌号" required>
					<view class="shop-address">
						<text class="address-text">直接输入四位数字即可，系统会自动校正输入格式</text>
						<uni-easyinput placeholder="商户门牌号,如50-14。可直接输入四位数字" v-model="formData.address.address_number"
							@input="addressInput" trim />
					</view>
				</uni-forms-item>

				<uni-forms-item label="商户名称" required>
					<text class="font-24 m-l-10 color-555">全称</text>
					<uni-easyinput style="margin-bottom: 20rpx;" placeholder="全称" v-model="formData.shop_name.full_name"
						trim />
					<text class="font-24 m-l-10 color-555">简称</text>
					<uni-easyinput placeholder="简称" v-model="formData.shop_name.short_name" />
				</uni-forms-item>
				<uni-forms-item name="form-item" label="商户logo">
					<view class="image-box bg-gray">
						<cloud-image-alioss uploadDir="henghui/images" v-model="formData.logo_src"></cloud-image-alioss>
					</view>
				</uni-forms-item>
				<uni-forms-item name="banner" label="门头图片">
					<view class="image-box bg-gray">
						<cloud-image-alioss uploadDir="henghui/images" v-model="formData.banner"></cloud-image-alioss>
					</view>
				</uni-forms-item>
				<uni-forms-item name="banner" label="门头图片">
					<view class="image-box bg-gray">
						<cloud-image-alioss uploadDir="henghui/images" v-model="formData.banner"></cloud-image-alioss>
					</view>
				</uni-forms-item>
				<uni-forms-item name="shop_desc" label="商户简介">
					<uni-easyinput type="textarea" placeholder="商户简介 文字" v-model="formData.shop_desc" />
				</uni-forms-item>
				<uni-forms-item name="location" label="商铺位置" required>
					<view class="" v-if="showLocation">
						<view class="">
							<text class="font-28 color-555">参考地址：</text>
							<text class="font-28 color-555">{{formData.location.name}}</text>
						</view>
						<view class="">
							<text class="font-28 color-555">位置的经纬度：</text>
							<text class="font-28 color-555">{{`[${formData.location.longitude}, ${formData.location.latitude}]`}}</text>
						</view>
					</view>
					<view class="location-box" @click="toChooseLocation">
						<text class="colorGray margin-right-20">请在地图上选择商铺位置</text>
						<wjf-iconfont code="e7b3" color="deepskyblue" size="15"></wjf-iconfont>
					</view>

				</uni-forms-item>
				<uni-forms-item name="phone" label="联系电话" required>
					<uni-easyinput style="margin-bottom: 20rpx;" placeholder="对外销售电话" type="number"
						v-model="formData.phone.contact" trim />
					<uni-easyinput style="margin-bottom: 20rpx;" placeholder="老板或负责人电话" type="number"
						v-model="formData.phone.head" trim />
					<uni-easyinput placeholder="商务合作电话" type="number" v-model="formData.phone.business" trim />
				</uni-forms-item>
				<uni-forms-item name="website" label="商户官网">
					<uni-easyinput type="textarea" placeholder="商户官网" v-model="formData.website" trim />
				</uni-forms-item>

				<uni-forms-item name="business_license" label="营业执照">
					<view class="image-box bg-gray">
						<cloud-image-alioss uploadDir="henghui/images"
							v-model="formData.business_license"></cloud-image-alioss>
					</view>
				</uni-forms-item>

				<uni-forms-item name="online" label="是否营业">
					<switch @change="binddata('online', $event.detail.value)" :checked="formData.online" />
				</uni-forms-item>
				<uni-forms-item name="state" label="是否启用">
					<switch @change="binddata('state', $event.detail.value)" :checked="formData.state" />
				</uni-forms-item>

			</uni-forms>
		</view>
		<view class="uni-button-group">
			<button type="default" @click="goBack">返回</button>
			<button type="primary">保存</button>
			<button type="primary" style="color: #fff; background-color: #f40000;" @click="submit_1"
				:disabled="isApplyDisable">提交审核</button>

		</view>
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->

	</view>
</template>

<script>
	import {
		validator
	} from '@/js_sdk/validator/tian-mall-shop-apply.js';

	function getValidator(fields) {
		let reuslt = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				reuslt[key] = validator[key]
			}
		}
		return reuslt
	}
	const db = uniCloud.database()
	export default {
		data() {
			return {
				formData: {
					"ID": 0, //商户唯一编号，系统自动根据门牌号识别生成
					"address": {
						"address_number": ""
					},
					"banner": "",
					"shop_name": {
						"full_name": '',
						"short_name": ''
					},
					"location": {
						"name": '',
						"latitude": 0,
						"longitude": 0
					},
					"logo_src": "",
					"business_license": "", //营业执照
					"shop_desc": "",
					"website": "",
					"phone": {
						"contact": "",
						"head": "",
						"business": ""
					},
					"online": true,
					"state": true
				},
				rules: {
					...getValidator(["address", "shop_name", "logo_src", "banner", "shop_desc", "phone", "website",
						"business_license", "online", "state"
					])
				},
				resShopData: {}, //存储读取的商户数据
				submitType: '',
				applyState: -1,
				showLocation: false
			}
		},
		computed: {
			isApplyDisable() {
				return this.formData.ID >= 0 && this.applyState > 0;
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {

			test() {
				console.log(this.formData.ID);
				this.checkShopData()
			},
			toChooseLocation() {
				// #ifdef MP-WEIXIN
				wx.chooseLocation({
					success:(res)=> {
						
						this.showLocation = true
						this.formData.location.name = res.name ? res.name : ''
						this.formData.location.longitude = res.longitude
						this.formData.location.latitude = res.latitude
						console.log(this.formData.location);
					}
				})
				// #endif
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			addressInput(e) {

				// 正则表达式匹配格式：两位数字-两位数字
				const correctFormat = /^\d{2}-\d{2}$/;
				// 如果输入已经是正确格式，直接返回
				if (correctFormat.test(e)) {
					this.formData.ID = e.replace(/-/g, '') * 1
					this.checkShopData()
					return
				} else {
					this.formData.ID = 0
				}

				let newVal

				// 用正则表达式替换错误符号为正确的 '-'
				newVal = e.replace(/[_*+.——=-]+/g, '-');

				// 检查是否是纯四位数字
				const fourDigitFormat = /^\d{4}$/;
				if (fourDigitFormat.test(e)) {
					// 在中间添加 '-'
					newVal = e.slice(0, 2) + '-' + e.slice(2);
				}

				// 再次检查是否符合正确格式
				if (correctFormat.test(newVal)) {
					setTimeout(() => {
						this.formData.address.address_number = newVal
						this.formData.ID = newVal.replace(/-/g, '') * 1
						this.checkShopData()
					}, 1)
				}
			},
			async checkShopData() {
				await db.collection('tian-mall-shops').where({
						ID: this.formData.ID * 1
					}).field(
						'ID,address,banner,shop_name,logo_src,business_license,shop_desc,website,phone,online,state')
					.get().then(({
						result
					}) => {
						// console.log(result);
						if (result.data.length == 0) {
							this.submitType = 'add'
						} else {
							this.submitType = 'edit'
							this.resShopData = result.data[0]
							this.checkApply()
						}
					})
			},
			// 检查申请状态
			async checkApply() {
				let resCheck = await db.collection('tian-mall-shop-apply').where({
					ID: this.formData.ID * 1
				}).field('ID,uid,state').get();

				if (resCheck.result.data.length == 0) {
					await db.collection('tian-mall-shop-apply').add({
						ID: this.formData.ID * 1,
						state: -1
					}).then(() => {

						this.applyState = -1
						this.formData = Object.assign({}, this.formData, this.resShopData)
					})
				} else {
					switch (resCheck.result.data[0].state) {
						case -1:
							console.log(resCheck.result);
							this.formData = Object.assign({}, this.formData, this.resShopData)
							break;
						default:
							break;
					}
				}
			},
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.submit().then((res) => {
					res.dcloud_appid = this.systemInfo.appId;
					res.address = this.address;
					if (this.id) {
						this.editForm(res)
					} else {
						this.submitForm(res)
					}
				}).catch((errors) => {
					uni.hideLoading()
				})
			},

			submit_1() {
				console.log(123);
			},
			async saveShopData() {
				if (this.submitType == 'add') {

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-container {
		padding: 0;
		padding-bottom: 50px;
	}

	.shop-id-box {
		text {
			color: #777;
			background-color: #efefef;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
		}
	}

	.shop-address {
		margin-top: -20rpx;

		.address-text {
			color: #888;
			padding-left: 20rpx;
			font-size: 26rpx;
		}
	}

	.image-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		display: flex;
		justify-content: space-around;
		align-items: cent;
		padding: 10px 20px;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.uni-button {
		// width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	.location-box {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}
</style>